<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>飞翔的小鸟</title>
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../css/login.css">
    <style>
        .banquan:hover {
            text-decoration: underline
        }
    </style>
</head>
<body>
<div class="loginBox" v-cloak> <!-- v-cloak防止闪现 -->
    <h2>登录</h2>
    <form @submit.prevent="submit"> <!-- 阻止表单默认提交 -->
        <div class="item">
            <input type="text" v-model="login.username" required> <!-- 双向数据绑定 -->
            <label>用户名</label>
        </div>
        <div class="item">
            <input type="password" v-model:value="login.password" required>
            <label>密码</label>
        </div>
        <button class="btn">submit
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </button>
    </form>
</div>

<p style="position: fixed;bottom: 12px;width: 100%;text-align: center;">
    <a class="banquan" style="color:#fff; font-size:14px;" href="https://beian.miit.gov.cn/"
       target="_blank">冀ICP备2022027058号</a>
</p>
</body>
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el:'.loginBox',
        data() {
            return {
                login:{
                    username: '',
                    password: ''
                }
            }
        },
        methods:{
            submit(){
                axios.get("/login?username=" + this.login.username + "&password=" + this.login.password).then((res)=>{
                    console.log(res)
                    if (res.data){
                        // localStorage.setItem('userInfo',JSON.stringify(res.data))
                        window.location.href="/lot/manage.html"
                    }else{
                        this.$message.error("登录失败")
                    }
                })
            }
        }
    })
</script>
</html>